<template>
  <span
    class="icon"
    :class="iconClass"
    :width="width + 'rem'"
    :height="height + 'rem'"
    :style="styles"
  ></span>
</template>
<script>
export default {
  props: {
    width: {
      type: Number,
      default: 32
    },
    height: {
      type: Number,
      default: 32
    },
    imgType: {
      type: Number
    },
    size: {
      default: 1
    },
    styles: {}
  },
  data() {
    return {
      classMap: ['decrease', 'discount', 'guarantee', 'invoice', 'special']
    }
  },
  computed: {
    iconClass() {
      return this.classMap[this.imgType] + this.size
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../assets/stylus/mixin.styl';

.icon {
  display: inline-block;
  width: 0.32rem;
  height: 0.32rem;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 0.32rem;

  &.decrease1 {
    bg-img('../assets/imgs/decrease_1');
  }

  &.decrease2 {
    bg-img('../assets/imgs/decrease_2');
  }

  &.decrease3 {
    bg-img('../assets/imgs/decrease_3');
  }

  &.decrease4 {
    bg-img('../assets/imgs/decrease_4');
  }

  &.guarantee1 {
    bg-img('../assets/imgs/guarantee_1');
  }

  &.guarantee2 {
    bg-img('../assets/imgs/guarantee_2');
  }

  &.guarantee3 {
    bg-img('../assets/imgs/guarantee_3');
  }

  &.guarantee4 {
    bg-img('../assets/imgs/guarantee_4');
  }

  &.invoice1 {
    bg-img('../assets/imgs/invoice_1');
  }

  &.invoice2 {
    bg-img('../assets/imgs/invoice_2');
  }

  &.invoice3 {
    bg-img('../assets/imgs/invoice_3');
  }

  &.invoice4 {
    bg-img('../assets/imgs/invoice_4');
  }

  &.special1 {
    bg-img('../assets/imgs/special_1');
  }

  &.special2 {
    bg-img('../assets/imgs/special_2');
  }

  &.special3 {
    bg-img('../assets/imgs/special_3');
  }

  &.special4 {
    bg-img('../assets/imgs/special_4');
  }

  &.discount1 {
    bg-img('../assets/imgs/discount_1');
  }

  &.discount2 {
    bg-img('../assets/imgs/discount_2');
  }

  &.discount3 {
    bg-img('../assets/imgs/discount_3');
  }

  &.discount4 {
    bg-img('../assets/imgs/discount_4');
  }
}
</style>
